<template>
    <div>
        <el-tabs v-model="activeIndex" :tab-position="tabPosition" @tab-click="changeFormRouter">
            <el-tab-pane :route="item.key_name" v-for="(item, index) in activeConfigSourceListData" :key="item.id"
                :name="index.toString()" :label="item.key_title">
                <router-link :to="{name: item.key_name}"></router-link>
            </el-tab-pane>
            <div>
                <router-view></router-view>
            </div>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tabPosition: 'left',
                activeIndex: "0",
                activeConfigSourceListData: [],
                parentUrl: '/admin/configManager/',
            }
        },
        created () {
           this.configSourceActiveList()
        },
        computed: {
            timer() {
               return this.$route.query.id
            }
        },
        watch: {
          timer(newId, oldId) {
              this.configSourceActiveList()
          }
        },
        methods: {
            changeFormRouter(tab, event) {
                let url = tab.$attrs.route
                let currentUrl = this.$route.path
                let replaceUrl = this.parentUrl + url
                if (currentUrl !== replaceUrl) {
                    this.$router.push({
                        path: replaceUrl
                    })
                }
            },
            configSourceActiveList() {
                const _this = this
                const params = {}
                _this.axios.post(_this.$API.ZHIHUAPI.configSourceActive, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    // console.log(res)
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.activeConfigSourceListData = res.data.list
                            this.$router.push({
                                path: _this.parentUrl + _this.activeConfigSourceListData[0]['key_name']
                            })
                            _this.activeIndex = '0'
                        } else {
                            _this.activeConfigSourceListData = []
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.activeConfigSourceListData = []
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.activeConfigSourceListData = []
                })
            },
        }
    }
</script>
